<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <title>学生发布的需求</title>
  <jsp:include page="../common/common_resources.jsp"/>
</head>
<body>
<div class="layui-fluid mt-3">
  <div class="layui-row">
    <div class="layui-col-xs4 layui-col-xs-offset4">
      <form class="layui-form" action="" method="post" id="loginForm">
        <div class="layui-form-item">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-block">
            <input type="text" name="userName" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-block">
            <input type="password" name="pwd" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">角色</label>
          <div class="layui-input-block">
            <input type="radio" name="role" value="student" title="学生" checked>
            <input type="radio" name="role" value="teacher" title="教师" >
            <input type="radio" name="role" value="admin" title="管理员" >
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="loginBtn">登录</button>
            <button class="layui-btn" id="resetBtn">重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  layui.use(['form', 'jquery','layer'], function(){
    var form = layui.form,$=layui.jquery
      ,layer = layui.layer;
    //监听提交
    form.on('submit(loginBtn)', function(data){
      $.ajax({
        url: '<%=request.getContextPath()%>/login',
        method: 'post',
        data: data.field,//当前容器的全部表单字段，名值对形式：{name: value}
        success: function (result) {
          if (result.success) {
            layer.msg(result.data, {
              icon: 6, // 0-6,6:开心
              time: 500 // 500ms后调用回调
            }, function(){
              parent.location.href = '<%=request.getContextPath()%>/front/toMain';
            })
          }else {
            layer.open({
              content: result.errMsg,
              icon: 5, // 快哭了
              anim: 6 // 0-6 不同的效果
            });
          }
        }
      });
      return false;
    });
    // 重置按钮点击
    $("#resetBtn").click(function () {
      document.getElementById("loginForm").reset();
      // layui中如果按钮放在form中,点击会提交,返回false阻止这个行为
      return false;
    });
  });
</script>
</body>
</html>
